<template>
  <div>
    <Navitem />
    <div class="context">
      <div class="left" style="padding-left: 30px">
        <div
          style="width: 100%; text-align: center; color: white; font-size: 30px"
        >
          听我们的建议？
        </div>
        <div
          v-for="(item, index) in textList"
          style="display: block; color: white"
        >
          {{ `${index + 1}、` + item }}
        </div>
      </div>
      <div class="right">
        <div
          style="
            width: 100%;
            text-align: center;
            color: white;

            font-size: 30px;
          "
        >
          或说出你的建议!
        </div>
        <div
          v-for="(item, index) in rightContxt"
          style="display: block"
          class="rightBox"
        >
          {{ `${index + 1}、` + item }}
        </div>
        <input
          type="text"
          style="width: 400px; height: 25px; border-radius: 20px"
          @keyup.enter="doPush($event)"
          :value="rightContxtValue"
        />
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Navitem from './navitem.vue'
export default {
  name: 'NalimalHistory',
  components: { Navitem },
  data() {
    return {
      textList: [
        '在生活中，应该节约用水、电、纸，以及节约粮食的好习惯。',
        '不乱扔垃圾，不随地吐疾。',
        '不随意践蹋草坪和采摘花朵。',
        '学会垃圾分类。',
        '少开私家车出行，注意低碳环保。',
        '不要乱扔废旧电池和一次性塑料袋。',
        '保护野生动植物，不随意破坏野生动植物的栖息地。',
        '不把脏水、废水以及有毒物质倒入河中。',
        '把废弃的电池等相关物品送去专门的回收站灰色。',
        '吃饭时应该光盘行动，且尽量避免使用一次性饭盒。',
        '对企业废气治理进行管控，避免工业废气废水排放污染。',
      ],
      rightContxt: [1, 2, 2],
      rightContxtValue: '',
    }
  },

  mounted() {},

  methods: {
    doPush(e) {
      this.rightContxtValue = e.target.value
      this.rightContxt.push(e.target.value)
      this.rightContxtValue = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.context {
  display: flex;
}
.left {
  flex: 1;
}
.right {
  flex: 1;
}
.right {
  height: 600px;
}
</style>
